
import React, { Component } from 'react'
// Import Swiper React components
import SwiperCore, { Navigation, Pagination, Scrollbar, A11y, Autoplay } from 'swiper';

import { Swiper, SwiperSlide } from 'swiper/react';
//引入axios
import axios from "axios"
// Import Swiper styles
import 'swiper/swiper.scss';
import 'swiper/components/pagination/pagination.scss';
import Swipercss from "../scss/Swiper.module.scss"

// install Swiper components
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y, Autoplay]);

export default class Swip extends Component {
    state = {
        imglist: [],
        change: 1
    }
    render() {
        console.log("Swip组件加载");
        if (this.state.imglist.length > 0) {
            return (
                <Swiper
                    // onSlideChange={() => console.log('slide change')}
                    // onSwiper={(swiper) => console.log(swiper)}
                    className={Swipercss.Swiper}
                    pagination={{ clickable: true }}
                    autoplay={{ delay: 1000 }}

                >
                    {this.state.imglist.map((item, index) => {
                        return (
                            <SwiperSlide key={item.loopimg_title} className={Swipercss.SwiperItem}> <img src={item.loopimg_url} alt="" /> </SwiperSlide>
                        )
                    })}
                    {/* <SwiperSlide className={Swipercss.SwiperItem}> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604129653537&di=37f6a27e421208797b71f4656da06cac&imgtype=0&src=http%3A%2F%2Fpic.sucaibar.com%2Fpic%2F201306%2F15%2F21c9211183.jpg" alt="" /> </SwiperSlide>
                    <SwiperSlide className={Swipercss.SwiperItem}> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604129653537&di=7ef565b920ed60f8618990549140efdc&imgtype=0&src=http%3A%2F%2Fimg.storage.17wanba.org.cn%2Fgame%2F2016%2F05%2F07%2Fa28dc6051879a0188a671fbb5724c771.jpg" alt="" /> </SwiperSlide>
                    <SwiperSlide className={Swipercss.SwiperItem}>  <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3167845568,4173731740&fm=26&gp=0.jpg" alt="" /></SwiperSlide>
                    <SwiperSlide className={Swipercss.SwiperItem}> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604129742273&di=427a09217b830de23dd5d5cc01181e62&imgtype=0&src=http%3A%2F%2Fp18.qhimg.com%2Fbdr%2F740__%2Fd%2F_open360%2F1113dm%2F8.jpg" alt="" /></SwiperSlide> */}
                </Swiper>
            );
        } else {

            return (
                <div>
                    <h1>网络不稳定</h1>
                </div>
            )
        }
    }

    componentDidMount() {
        console.log("1、Swip组件挂载结束");
        axios.get("http://s.linweiqin.com/api/s/getIndexLoopimg").then(res => {
            // console.log(res.data.wdata);
            this.setState({
                imglist: res.data.wdata
            })
        })


    }
};